<template>
  <div class="lobg" :style="style">
    <div class="logo_lo">
      <a href="#">
        <img src="../../icons/png/logo-icon.png" class="logo-icon mr10">
        <span class="logo-text white v_m">DASHBOARD</span>
      </a>
    </div>
    <div class="lobox">
      <h2 class="f24">登录 \ Login</h2>
      <form>
        <input type="text" name="username" placeholder="请输入用户名" class="layui-input layui-input1" v-model="loginForm.userName" autocomplete="username">
        <input type="password" name="password" placeholder="请输入密码" class="layui-input layui-input1" v-model="loginForm.password" autocomplete="current-password">
      </form>
      <div class="layui-form-item">
        <div class="layui-input-inline" style="width:240px;">
          <input type="text" placeholder="请输入验证码" class="layui-input  layui-input1" v-model="loginForm.captcha">
        </div>
        <div class="layui-form-mid layui-word-aux mt20"><img class="pointer" :src="captchaUrl" width="99" height="51" v-on:click="changeCaptcha()"></div>
      </div>
      <div class="mt30 pt20"><button class="layui-btn layui-btn-normal layui-btn-lg  layui-btn-fluid" v-on:click="handleLogin">登 录</button></div>
    </div>

    <div class="lo_footer">
      <p>指导单位：全国学校体育联盟(教学改革) 技术支持：北京京师世范教育科技有限公司</p>
      Copyright © 北京京师世范教育科技有限公司
    </div>
  </div>
</template>

<script>
import config from '../../utils/config'
export default {
  name: 'index',
  data () {
    return {
      loginForm: {
        userName: '',
        password: ''
      },
      loading: false,
      style: {
        height: document.documentElement.clientHeight + 'px'
      },
      fullHeight: document.documentElement.clientHeight,
      config: config,
      captchaUrl: config.baseUrl + '/captcha'
    }
  },
  mounted () {
    this.loginForm.userName = window.localStorage.getItem('userName')
    this.loginForm.password = window.localStorage.getItem('password')
    const that = this
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        that.fullHeight = window.fullHeight
      })()
    }
  },
  methods: {
    handleLogin () {
      this.loading = true
      this.$store.dispatch('LoginByUsername', this.loginForm).then((res) => {
        this.loading = false
        window.localStorage.setItem('userName', this.loginForm.userName)
        window.localStorage.setItem('password', this.loginForm.password)
        this.$router.push({ path: this.redirect || '/' })
      }).catch(() => {
        this.loading = false
      })
    },
    changeCaptcha () {
      this.captchaUrl = this.config.baseUrl + '/captcha?random=' + Math.random()
    }
  },
  watch: {
    fullHeight: function (val) {
      this.style.height = val + 'px'
    }
  }
}
</script>

<style scoped>
  .pointer {
    cursor: pointer;
  }
</style>
